<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入标题" v-model="queryParam.messageTitle"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="阅读状态" :label-col="labelCol" :wrapper-col="wrapperCol">
              <z-dict-select-tag popupContainer="parent" dictCode="MB_SYSTEM_YES_NO"  v-model="queryParam['readStatus@EQ']"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="MessageList"
        ref="vxeTable"
        v-bind="gridOptions"
      >
      <template #action="{ row }">
        <template>
          <a @click="handleDetail(row)" >查看</a>
        </template>
      </template>
    </vxe-grid>
    </div>
    <MessageModal @ok="modalFormOk" ref="modalForm" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { getAction, postAction } from '@/services/manage'
import MessageModal from './modules/MessageModal'
export default {
  name: 'MessageList',
  components: { ZDictSelectTag, MessageModal },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '发送人', field: 'fromNickName' },
        { title: '发送人账户', field: 'fromUserName' },
        { title: '标题', field: 'messageTitle' },
        { title: '阅读状态', field: 'readStatus', slots: { default: ({ row }) => {
          return row.readStatus === '1' ? '是' : '否'
        } }},
        { title: '接收人', field: 'toNickName' },
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/message/my/',
        readAll: '/message/read/',
        channelList: '/message/channel/list',
        send: '/message/send'
      },
      channelList: [],
      proxyConfig: {
        autoLoad: false
      },
      toolbarConfig: {
        buttons: [
          { buttonRender: { name: 'VxeToolbarButton', props: { title: '一键已读', icon: 'appstore' }, events: { click: this.handleRead }}}
          // { buttonRender: { name: 'VxeToolbarButton', props: { title: '发送消息', icon: 'appstore' }, events: { click: this.sendMessage }}}
        ],
        import: false
      },
      channelCode: ''
    }
  },
  methods: {
    getChannel() {
      return getAction(this.url.channelList)
    },
    sendMessage() {
      postAction(this.url.send, {
        channel: 'innerMsg',
        from: 'admin',
        to: 'admin',
        title: '我是测试的标题',
        content: '我是测试的内容'
      }).then(res => {
        if (res.success) {
          this.$message.success('发送成功')
        }
        console.log(res)
      })
    },
    handleRead() {
      getAction(this.url.readAll + this.channelCode).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    },
    handleDetail(row) {
      this.$refs.modalForm.show(row, this.channelCode)
    }
  },
  async mounted() {
    const res = await this.getChannel()
    if (res.success) {
      this.channelList = res.result
      this.channelCode = this.channelList[0].channelCode
      this.url.list = `/message/my/${this.channelList[0].channelCode}`
      this.loadData()
    }
  }

}
</script>

